import React, { useState } from "react";
import Copilot from "./Copilot";
import WorkArea from "./WorkArea";
import { useWorkareaStyle } from "./styles";
import { FlightOption, SimplifiedFlightInfo } from "../../services/apiService";
import { FlightState } from "./types";

const CopilotDemo: React.FC = () => {
  const { styles } = useWorkareaStyle();
  const [copilotOpen, setCopilotOpen] = useState(true);
  const [displayHtml, setDisplayHtml] = useState("");
  const [displayProductId, setDisplayProductId] = useState("");
  const [flightState, setFlightState] = useState<FlightState>();
  const [currentDisplayType, setCurrentDisplayType] = useState<
    "html" | "product" | null
  >(null);

  // 处理内容保存成功后的逻辑
  const handleContentSaved = (productId: string) => {
    // 清空 HTML 内容，设置 productId
    setDisplayHtml("");
    setDisplayProductId(productId);
    setCurrentDisplayType("product");
  };

  return (
    <div className={styles.copilotWrapper}>
        <WorkArea
        copilotOpen={copilotOpen}
        setCopilotOpen={setCopilotOpen}
        displayHtml={displayHtml}
        displayProductId={displayProductId}
        flightState={flightState}
        currentDisplayType={currentDisplayType}
        onContentSaved={handleContentSaved}
        />      
      <Copilot
        copilotOpen={copilotOpen}
        setCopilotOpen={setCopilotOpen}
        setDisplayHtml={setDisplayHtml}
        setDisplayProductId={setDisplayProductId}
        currentDisplayType={currentDisplayType}
        setCurrentDisplayType={setCurrentDisplayType}
        setFlightState={setFlightState}
      />
    </div>
  );
};

export default CopilotDemo;
